<template>
  <div id="sampleTypeCompareDiv">
    <Breadcrumb content="样本类型对照" />
    <div class="bodyContent">
      <Splitpanes class="area">
        <Pane :size="20">
          <vxe-toolbar perfect>
            <template #buttons>
              <div class="smallToolTitle">质量指标样本类型</div>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="qLoading" @click="getQiSampleTypeList"></vxe-button>
            </template>
          </vxe-toolbar>
          <div class="leftTable">
            <vxe-table :data="qiSampleTypeList" @current-change="qiSampleTypeRowClick" :loading="qLoading" ref="qiSampleTypeTable" border class="mytable-scrollbar" height="auto" show-header-overflow show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }">
              <vxe-column type="seq" title="#" width="30"></vxe-column>
              <vxe-column field="code" title="编号"></vxe-column>
              <vxe-column field="name" title="名称"></vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <!-- 中间对照信息 -->
        <Pane :size="40">
          <vxe-toolbar perfect>
            <template #buttons>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="cLoading" @click="findSampleTypeCompareList"></vxe-button>
            </template>
          </vxe-toolbar>

          <div class="leftTable">
            <vxe-table :data="sampleTypeCompareList" :loading="cLoading" @cell-dblclick="deleteSampleTypeCompare" ref="feeitemVsItemdictTable" border class="mytable-scrollbar" height="auto" show-header-overflow show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }">
              <vxe-column type="seq" title="#" width="30"></vxe-column>
              <vxe-column field="sampleTypeCode" title="样本类型编码"> </vxe-column>
              <vxe-column field="sampleTypeName" title="样本类型名称"> </vxe-column>
              <vxe-column field="inputCode" title="助记符"> </vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <!-- 右侧信息 -->
        <Pane :size="40">
          <vxe-toolbar perfect>
            <template #buttons>
              <div class="smallToolTitle">样本类型</div>
              <vxe-input v-model="searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getLabSampleTypeList" @keyup="keyupEnter" @search-click="getLabSampleTypeList()"></vxe-input>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="lLoading" @click="getLabSampleTypeList"></vxe-button>
            </template>
          </vxe-toolbar>
          <div class="rightTable">
            <vxe-table @cell-dblclick="labSampleTypeRowClick" :data="labSampleTypeList" :loading="lLoading" ref="itemDictTable" border show-header-overflow height="auto" show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }" class="mytable-scrollbar">
              <vxe-column type="seq" title="#" width="30"></vxe-column>
              <vxe-column field="sampleTypeCode" title="样本类型编码"> </vxe-column>
              <vxe-column field="sampleTypeName" title="样本类型名称"> </vxe-column>
              <vxe-column field="inputCode" title="助记符"> </vxe-column>
            </vxe-table>
          </div>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import { AppStore } from '@/stores/store';
import { isEmpty } from 'lodash';
let store = AppStore();

let { proxy }: any = getCurrentInstance();
let searchValue = ref('');
let qiSampleTypeList = reactive([]);
let labSampleTypeList = reactive([]);
let sampleTypeCompareList = reactive([]);
let qLoading = ref(false); //刷新+表格加载
let lLoading = ref(false);
let cLoading = ref(false);
let sltQiSampleType: any = {};
// 方法定义区 =============
onMounted(() => {
  getQiSampleTypeList();
});

//批量获取字典
function getQiSampleTypeList() {
  qiSampleTypeList.length = 0;
  qLoading.value = true;
  const url = '/api/sys/basDictDetail/findDictDetailList';
  proxy.$http
    .get(url, { params: { code: 'qiSampleType' } })
    .then((res: any) => {
      if (res && res.data && res.data.length > 0) {
        qiSampleTypeList.push(...res.data);
        if (qiSampleTypeList.length > 0) {
          const kn = qiSampleTypeList.find((k) => k.commonId == sltQiSampleType.commonId);
          if (isEmpty(kn)) {
            qiSampleTypeRowClick({ row: qiSampleTypeList[0] });
          } else {
            qiSampleTypeRowClick({ row: kn });
          }
        } else {
          sltQiSampleType = {};
          sampleTypeCompareList.length = 0;
        }
      } else {
        sltQiSampleType = {};
        sampleTypeCompareList.length = 0;
      }
      qLoading.value = false;
    })
    .catch((err: any) => {
      qLoading.value = false;
      proxy.$alert(err, '提示');
    });
}

// 点击当前行// 行点击事件
function qiSampleTypeRowClick({ row }: any) {
  (proxy.$refs.qiSampleTypeTable as any).setCurrentRow(row);
  sltQiSampleType = row;
  proxy.$nextTick(() => {
    setTimeout(() => {
      (proxy.$refs.qiSampleTypeTable as any).scrollToRow(row);
    }, 150);
  });
  findSampleTypeCompareList();
  getLabSampleTypeList();
}
function getLabSampleTypeList() {
  labSampleTypeList.length = 0;
  lLoading.value = true;
  const url = '/api/qi/qiSampleTypeCompare/findLabSampleTypeList';
  let obj = {
    params: {
      seachValue: searchValue.value,
      qiSampleTypeCode: sltQiSampleType.code
    }
  };
  proxy.$http
    .get(url, obj)
    .then((res: any) => {
      if (res && res.data && res.data.length > 0) {
        labSampleTypeList.push(...res.data);
      }
      lLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      lLoading.value = false;
    });
}

function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    getLabSampleTypeList();
  }
}
function labSampleTypeRowClick({ row }: any) {
  if (isEmpty(sltQiSampleType.commonId)) {
    VxeMessage('请选择质量指标样本类型', VxeNotifyType.error);
    return;
  }
  const url = '/api/qi/qiSampleTypeCompare/addSampleTypeCompare';
  let labFeeitemVsItemDict = {
    qiSampleTypeCode: sltQiSampleType.code,
    sampleTypeCode: row.sampleTypeCode,
    seq: row.seq
  };
  proxy.$http
    .post(url, labFeeitemVsItemDict)
    .then((res: any) => {
      getLabSampleTypeList();
      findSampleTypeCompareList();
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

function findSampleTypeCompareList() {
  sampleTypeCompareList.length = 0;
  cLoading.value = true;
  const url = '/api/qi/qiSampleTypeCompare/findSampleTypeCompareList';
  const data = {
    params: {
      qiSampleTypeCode: sltQiSampleType.code
    }
  };
  proxy.$http
    .get(url, data)
    .then((res: any) => {
      sampleTypeCompareList.push(...res.data);
      cLoading.value = false;
    })
    .catch((err: any) => {
      cLoading.value = false;
      proxy.$alert(err, '提示');
    });
}
function deleteSampleTypeCompare({ row }: any) {
  const url = '/api/qi/qiSampleTypeCompare/deleteSampleTypeCompare';
  proxy.$http
    .post(url, {
      id: row.id
    })
    .then((res: any) => {
      findSampleTypeCompareList();
      getLabSampleTypeList();
      VxeMessage(res.status.msg, VxeNotifyType.success);
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}
</script>
<style lang="scss" scoped>
#sampleTypeCompareDiv {
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);

    .area {
      background-color: $base-white;

      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }

      .leftTable {
        height: calc(100% - 40px);
      }

      .rightTable {
        height: calc(100% - 40px - 32px);
      }

      // 右侧基本信息表单
      .baseForm {
        .el-row {
          margin-left: 0 !important;
          margin-right: 0 !important;
        }

        .form-footer {
          :deep(.el-form-item__content) {
            margin-left: 120px !important;
          }
        }

        .el-form-item--large {
          margin-bottom: 10px;
        }

        .el-radio {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>